<template>
  <div class="sec">
    <img v-if="list.bannerImgUrl" :src="list.bannerImgUrl" alt="" />
    <img v-if="list.detailImgUrl" :src="list.detailImgUrl" alt="" />
    <ul class="sameDiv1">
      <li :key="index" v-for="(item, index) in list.productBusVos">
        <img @click="detail(item)" :src="item.primaryUrl" alt="" />
        <div class="handle">
          <span  v-if="item.isGwCart == 1" @click="addgwcartFn(item)">加入购物车</span>

          <!-- <span @click="addgwcartFn(item)" v-if="item.isGwCart == 1"
            >加入购物车</span
          > -->

          <!-- <span
            v-if="item.pdfUrl"
            v-down="{
              url: item.pdfUrl,
              type: 'PDF下载',
              name: item.productName,
            }"
            > -->

          <!-- <span v-if="item.pdfUrl" @click="downFn(item.pdfOssId)">PDF下载</span> -->

          <span v-if="item.pdfUrl">
            <a
              target="_blank"
              :href="item.pdfUrl"
              style="
                display: flex;
                align-items: center;
                color: #323232;
                text-decoration: none;
              "
            >
              PDF图纸下载
            </a>
          </span>
          <!-- 
             v-down="{
              url: item.threedUrl,
              type: '3D模型下载',
              name: item.productName,
            }"
           -->

          <span v-if="item.threedUrl">
            <a
              :href="item.threedUrl"
              style="
                display: flex;
                align-items: center;
                color: #323232;
                text-decoration: none;
              "
            >
              3D模型图纸下载
            </a>
          </span>

          <!-- <span v-if="item.threedUrl" @click="downFn(item.threedOssId)"
            >3D模型下载</span
          > -->
        </div>
      </li>
    </ul>

    <cart
      :curId="curId"
      :sendInfo="sendInfo"
      @showCartFn="showCartFn"
      v-if="showCartFlag"
    />
  </div>
</template>

<script>
import "../utils/vdown";
import cart from "./cart";
import { getproductlist, addgwcart,getproductinfo } from "../apis/index";
export default {
  name: "home",
  components: { cart },
  // components: { foots },
  data() {
    return {
      curId: "",
      sendInfo: {},
      showCartFlag: false,
      info: {},
      list: [],
      name: "",
    };
  },

  // 监控data中的数据变化
  watch: {
    $route(to, from) {
      if (this.$route.query.nameType) {
        console.info("加载页面数据");
        this.getDetai();
      }
    },
  },

  mounted() {
    this.getDetai();
  },
  methods: {
    showCartFn() {
      this.showCartFlag = false;
    },
    downFn(info) {
      console.log(info, 98888777);
      this.$download.oss(info);

      // this.downLoadFile(url);

      // this.download(`system/oss/download/${ossid}`, {
      // }, `${name}.xlsx`)
    },
    downLoadFile(url) {
      let fileName = url.slice(url.lastIndexOf("/") + 1); // 这里是通过从后端获取到的 url  地址中截出来原本的文件名
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });
    },

    getCartDetai(productId) {
      getproductinfo({ productId })
        .then((res) => {
         
          // sendInfo
          this.sendInfo = {
            data0: res.data.data.specInfoList,
            data1: res.data.data.specTypes,
          };
          this.showCartFlag = true;
        })

        .catch(() => {});
    },
    addgwcartFn(item) {
      this.curId = item.id;

      this.getCartDetai(item.id);

     
      // console.log(item, 555);
      // addgwcart({
      //   productId: item.id + "",
      //   number: "1",
      //   remark: "无特殊需求",
      // })
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       this.$message({
      //         message: res.data.msg,
      //         type: "success",
      //       });
      //     }
      //     console.log(res.data.code, 88888888888);
      //   })

      //   .catch(() => {});
    },
    getDetai() {
      getproductlist({ nameType: this.$route.query.nameType })
        .then((res) => {
          console.log(res.data.data, 88888888888);
          this.list = res.data.data;
        })

        .catch(() => {});
    },
    detail(item) {
      this.$router.push({
        path: "/detail?id=" + item.id,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.sec {
  .handle {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    span {
      margin-right: 20px;
      cursor: pointer;
      text-decoration: underline;
      color: #2a2c2e;
      font-size: 15px;
      a {
        color: #2a2c2e;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  ul {
    &.sameDiv1 {
      width: 1420px;
      margin: 93px auto;
    }
    display: flex;
    flex-wrap: wrap;
    li {
      list-style-type: none;
      // border: 1px solid #2a2c2e;
      width: 32%;
      margin-bottom: 24px;
      margin-right: 2%;
      &:nth-child(3n) {
        // background: #000;
        margin-right: 0;
      }
    }
  }
}
</style>
